<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新东方顶部导航菜单</title>
		<style type="text/css">
			.clear{
				content: "";
				display: block;
				clear: both;
			}
			#father{
				position: relative;
				width:800px ;
			}
			ul{
				background:#f7f7f4;
			}
			#a ul li{
				list-style: none;
				display: inline;
				padding:10px;
			}
		img{
			padding-left: 40px;
			padding-right: 40px;
			vertical-align: middle;
		}
		#b{
			width: 240px;
		}
		#b ul li{
			list-style: none;
				display: inline-block;
			padding:5px;
		}
		#b{
			position: absolute;
			top: 5px;
			left: 430px;
		display: none;
		}
		#c{
			padding: 0px;
		}
	#d:hover{
			color: red;
			
		}
		#b{
			display: block;
		}
		</style>
	</head>
	<body>
		<div id="father" class="clear">
			<div id="a">
				<ul><img src="img/3/logo.gif"/>
					<li>购物车</li>|
					<li>优惠券</li>|
					<li>快速注卡</li>|
					<li>各地购课</li>|
					<li>手机报</li>|
					<li id="d">网站导航</li><img src="img/3/open_icon.gif" id="c"/>
				</ul>
				</div>
				<div id="b">
						<ul>
							<li>托福</li>
							<li>雅思</li>
							<li>考研</li>
							<li>职务英语</li>
							<li>初中</li>
							<li>日语</li>
								<hr />
							<li>网络课程</li>
							<li>资讯中心</li>
							<li>知识堂</li>
							<li>大师讲坛</li>
							<li>学习论坛</li>
							<li>学词</li>
							<li>考研搜校</li>
							<hr />
							<li>M-Zone</li>
							<li>手机报</li>
							<li>时时英语</li>
						</ul>
				</div>
		</div>
	</body>
</html>
